import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-view-child',
  standalone: true,
  imports: [],
  templateUrl: './view-child.component.html',
  styleUrl: './view-child.component.css'
})
export class ViewChildComponent implements OnInit,AfterViewInit{

  // 定义私有属性boxEl，是ElementRef类型。
  @ViewChild('box') private boxEl!: ElementRef;

  // ngOnInit和ngAfterViewInit阶段都能获取到页面的元素了：
  @ViewChild('box2', { static: true }) private boxEl2!: ElementRef;
  @Input()
  name: String = 'initial';

  el: ElementRef;
  constructor (  el: ElementRef) {
    this.el = el;
    console.log('constructor boxEl', this.boxEl);
    console.log('constructor boxEl2', this.boxEl2);
  }

  ngAfterViewInit(): void {
    console.log('ngAfterViewInit boxEl', this.boxEl);
    console.log('ngAfterViewInit boxEl2', this.boxEl2);
  }

  ngOnInit(): void {
    console.log('ngOnInit boxEl', this.boxEl);
    console.log('ngOnInit boxEl2', this.boxEl2);
  }

}
